<template>
  <div class="box" style="overflow:auto">
    <el-row>
      <el-col :span="8" v-for="(item,i) in list" :key="i">
        <el-card>
          <img :src="item.images.large.replace(/img7/,'img3')" alt="年代过于久远，无法找到图片">
          <h2>{{item.title}}</h2>
          <p>类型:{{item.genres.join()}}</p>
          <p>年份：{{item.year}}</p>
          <span>推荐指数：</span>
          <el-rate
            v-model="value"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
          <p>评分：{{item.rating.average}}</p>
            <el-button type="success" plain @click="fa(item.id)" class="anniu">有话要说</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
        loading: false,
        value:4.3
    };
  },
  props: ["list"],
  methods: {
    fa(data){
      this.$router.push({name:"addping",params:{id:data}})//跳转到评论页，并将电影id传过去！！！
    }
  },
  mounted(){
  }
};
</script>
<style lang="scss" scoped>
.box{
    height:563px;
    width: 100%;
    background: rgba(255, 255, 255, .5);
}
.hezi{
  width: 100%;
  height: 100px;
  background-color: #fff;
}
::v-deep .el-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  .el-col{
      width: 30%;
      height: 580px;
      border-radius: 10px;
      
      .el-card__body{
        position: relative;
        background: rgba(0, 0, 0, .5);
      }
  }
}
.anniu{
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>